<template>
	<div>

		<el-select style="width:100%;margin-bottom:10px" v-if="$store.state.superAdmin == 'true'" v-model="appMuseumId" @change="change" filterable placeholder="请选择博物馆">
	        <el-option
	          v-for="item in museumList"
	          :key="item.id"
	          :label="item.name"
	          :value="item.id">
	        </el-option>
	    </el-select>

		<Card>
			<!-- <Spin fix size="large" v-if="loading1"></Spin> -->
			<Tabs type="card" :animated="false">



				<TabPane label="预约订单">
					<div style="display:flex;align-items: center;justify-content: space-between;">
						<div style="display:flex;">
							<Input
					          	placeholder="根据预定者姓名搜索"
					          	suffix="ios-search"
					          	style="width:300px;margin-right:10px"
					          	v-model="bookName"
					          	@on-change="changeOrder"
					        ></Input>
					        </RadioGroup>
					        <DatePicker transfer :disabled="false" type="daterange" placeholder="选择起止时间" style="width: 300px;margin-left:0px" v-model="time" :editable="false" @on-change="changeOrder"></DatePicker>
					    </div>
				        <Button :loading="loading6" type="primary" class="Button" @click="download">导出表格</Button>
				    </div>
				    <Table
				      	class="table"
				      	:loading="loading3"
				      	highlight-row
				      	:columns="columns1"
				      	:data="data1"
				    ></Table>
				    <Page show-total class="page" :total="total1" :current.sync="current" show-elevator @on-change="changePage" />
		        </TabPane>



		        <!-- <TabPane label="门票规则">
		        	<Button type="primary" @click="saveTcOtaRule">新增规则</Button>
		        	<Table
				      	class="table"
				      	:loading="loading1"
				      	highlight-row
				      	:columns="columns2"
				      	:data="data2"
				    ></Table>
		        </TabPane> -->
		    </Tabs>
		</Card>

		<Modal title="规则操作" v-model="modal2" width="50">
      		<Form ref="form" :model="newData2" :label-width="100">
        		<FormItem label="星期：" prop="dayOfWeek">
          			<Select v-model="newData2.dayOfWeek">
            			<template v-for="item in weekList">
              				<Option :value="item.id">{{item.name}}</Option>
            			</template>
          			</Select>
        		</FormItem>
        		<FormItem label="门票数量：" prop="limitNum">
          			<InputNumber :min="0" style="width:100%" v-model="newData2.limitNum"></InputNumber>
        		</FormItem>
        		<FormItem label="具体时间段：">
          			<Button type="info" @click="detailRule">新增时间段规则</Button>
        		</FormItem>
        		<Table class="table" :columns="columns3" :data="data3"></Table>
        	</Form>
      		<div slot="footer">
        		<Button type="warning" class="Button" @click="modal2 = false">关闭</Button>
        		<Button type="primary" class="Button" @click="submit2" :loading="loading2">提交</Button>
      		</div>
    	</Modal>

    	<Modal title="详细规则" v-model="modal3" width="30">
    		<Form ref="form" :model="newData2" :label-width="100">
        		<FormItem label="限制人数：" prop="limitNum">
          			<InputNumber :min="0" style="width:100%" v-model="newData3.limitNum"></InputNumber>
        		</FormItem>
        		<FormItem label="时间区间：" prop="timeRange">
        			<TimePicker format="HH:mm" v-model="newData3.timeRange" type="timerange" style="width: 100%"></TimePicker>
        		</FormItem>
        	</Form>
    		<div slot="footer">
        		<Button type="warning" class="Button" @click="modal3 = false">关闭</Button>
        		<Button type="primary" class="Button" @click="submit3">提交</Button>
      		</div>
    	</Modal>

    	<Modal title="出行人" v-model="modal4" width="50">
    		<Table
		      	class="table"
		      	:loading="loading5"
		      	highlight-row
		      	:columns="columns4"
		      	:data="data4"
		    ></Table>
    		<div slot="footer">
        		<Button type="warning" class="Button" @click="modal4 = false">关闭</Button>
      		</div>
    	</Modal>



	</div>
</template>

<script>
	import axios from 'axios'
	export default {
	  	data() {
	    	return {
	    		loading1: false,
	    		loading2: false,
	    		loading3: false,
	    		loading4: false,
	    		loading5: false,
	    		loading6: false,
	    		otaType: 1,
	    		appMuseumId: '',
	    		museumList: [],
	    		total1: 0,
	    		columns1:[
	    			{ title: "预定人姓名", key: "bookName", align: "center" },
	    			{ title: "预订人手机号", key: "bookMobile", align: "center" },
	    			{ title: "预订人证件号", key: "idCard", align: "center" },
	    			{ title: "下单时间", key: "gmtCreate", align: "center" },
	    			{ title: "飞猪平台订单号", key: "outerId", align: "center",width:140 },
	    			{
			          title: "使用状态",
			          align: "center",
			          key: "availableNum",
			          render: (h, params) => {
			            let color = "";
			            if (params.row.availableNum == 0) {
			              color = "warning";
			            }
			            if (params.row.availableNum != 0) {
			              color = "primary";
			            }
			            return h(
			              "Tag",
			              {
			                props: { type: "dot", color: color }
			              },
			              params.row.availableNum==0?'已使用':'未使用'
			            );
			          }
			        },
	    			{ title: "预定数量", key: "amount", align: "center" },
	    			// { title: "场次", key: "timeRange", align: "center" },
	    			{ title: "出行日期", key: "validStart", align: "center" },
	    			// { title: "订单状态", key: "orderStatus", align: "center" },
	    			// { title: "操作", align: "center",
        //   				render: (h, params) => {
        //     				return h("div", [
        //     					h("Button",{
        //           					props: {
        //             					type: "success",
        //           					},
        //           					on: {
        //             					click: () => {
        //               						this.detail(params);
        //             					}
        //           					}
        //         				},"出行人"),
			    	// 		])
			    	// 	}
			    	// }
	    		],
	    		data1: [],
	    		columns2: [
			        { title: "星期", key: "dayOfWeek2", align: "center" },
			        { title: "门票数量", key: "limitNum", align: "center" },
			        { title: "具体时间段", key: "limitNum", align: "center",
			        	render: (h, params) => {
			        		return h('div',[
			        			params.row.items.map(function(item){
			        				return h('p',{
			        					style:{
			        						lineHeight: '30px'
			        					}
			        				},item.limitNum+'人 '+item.timeRange)
			        			})
			        		])
			        	}
			        },
			        { title: "操作", align: "center",
          				render: (h, params) => {
            				return h("div", [
            					h("Button",{
                  					props: {
                    					type: "warning",
                  					},
                  					style:{
                  						marginRight: '10px'
                  					},
                  					on: {
                    					click: () => {
                      						this.bianji2(params);
                    					}
                  					}
                				},"编辑"),
             					h("Button",{
                  					props: {
                    					type: "error",
                  					},
                  					on: {
                    					click: () => {
                      						this.del2(params);
                    					}
                  					}
                				},"删除")
			    			])
			    		}
			    	}
			    ],
			    data2:[],
			    modal2: false,
			    newData2:{
					dayOfWeek: 0,
					limitNum: 0,
			    },
			    ruleItems2: [],
			    weekList:[
			    	{
			    		name: '通用',
			    		id: 0
			    	},
			    	{
			    		name: '星期一',
			    		id: 1
			    	},
			    	{
			    		name: '星期二',
			    		id: 2
			    	},
			    	{
			    		name: '星期三',
			    		id: 3
			    	},
			    	{
			    		name: '星期四',
			    		id: 4
			    	},
			    	{
			    		name: '星期五',
			    		id: 5
			    	},
			    	{
			    		name: '星期六',
			    		id: 6
			    	},
			    	{
			    		name: '星期日',
			    		id: 7
			    	},
			    ],
			    data3: [],
			    columns3: [
			        { title: "限制人数", key: "limitNum", align: "center"},
			        { title: "时间区间", key: "timeRange", align: "center"},
			        { title: "操作", align: "center",
          				render: (h, params) => {
            				return h("div", [
            					h("Button",{
                  					props: {
                    					type: "warning",
                  					},
                  					style:{
                  						marginRight: '10px'
                  					},
                  					on: {
                    					click: () => {
                      						this.bianji3(params);
                    					}
                  					}
                				},"编辑"),
             					h("Button",{
                  					props: {
                    					type: "error",
                    					loading: this.loading5
                  					},
                  					on: {
                    					click: () => {
                      						this.del3(params);
                    					}
                  					}
                				},"删除")
			    			])
			    		}
			    	}
			   	],
			   	modal3: false,
			   	newData3:{
			   		limitNum: 0,
			   		timeRange: []
			   	},
			   	id2: '',
			   	id3: '',
				bookName: '',
				current: 1,
				end: '',
				orderStatus: 2,
				size: 10,
				start: '',
				orderStatusList:[
					// {
					// 	id: 0,
					// 	name: '全部'
					// },
					{
						id: 2,
						name: '待使用'
					},
					{
						id: 3,
						name: '已取消'
					},
					{
						id: 4,
						name: '已过期'
					},
					{
						id: 5,
						name: '已过期'
					},
				],
				time: [new Date(),new Date()],
				modal4: false,
				data4: [],
				columns4:[
					{ title: "姓名", key: "name", align: "center"},
					{ title: "证件号", key: "idCard", align: "center"},
					{ title: "手机号", key: "mobile", align: "center"},
				],

	    	}
	    },
	    created(){
	    	if (this.$store.state.superAdmin == "true") {
		      	this.getmuseumList();
		    }
		    else {
		      	// if (this.$store.state.museums.length > 1) {
		       //  	this.appMuseumId = this.$store.state.museumId;
		      	// } else {
		       //  	this.appMuseumId = "";
		      	// }
		      	this.appMuseumId = this.$store.state.museumId;
		      	this.getTcOtaOrderDTO()
		      	// this.getTcOtaRule()
		      	// this.getTcOtaOrderDTO()
		    }
	    },
	    methods:{
	    	download(){
	    		this.loading6 = true
	    		let that = this
				axios({
					method: 'post',
					url: this.baseUrl + '/stage/excel/exportTaoBaoPeopleExcel',
					headers: {
						"token": this.$store.state.token || localStorage.getItem('token') || '',
						"Content-Type": "application/json;charset=UTF-8",
					},
					responseType: 'blob',
					data:{
						start: this.getTime(this.time[0]),
						end: this.getTime(this.time[1]),
						museumId: this.appMuseumId,
					} 
				}).then(function(res){
					that.loading6 = false
					// let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);
					var data = res.data;
					var downloadElement = document.createElement('a');
			    	var href = window.URL.createObjectURL(data); //创建下载的链接
			    	downloadElement.href = href;
			        downloadElement.download = decodeURI(res.headers['content-disposition'].split('filename=')[1])
			        document.body.appendChild(downloadElement);
			        downloadElement.click(); //点击下载
			        document.body.removeChild(downloadElement); //下载完成移除元素
			        window.URL.revokeObjectURL(href); //释放掉blob对象
			        that.alert = false
			        that.phoneModal = false
			    }).catch(resp => {
			    	that.loading6 = false
			    	that.$Message.error('下载失败')
			    })
	    	},
	    	getmuseumList() {
		      	this.loading1 = true;
		      	this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
		        	if (res.data.code == 200) {
		          		this.museumList = res.data.data;
		          		for (let i = 0; i < this.museumList.length; i++) {
		            		if (this.museumList[i].name.length > 50) {
		              			this.museumList[i].name =
		                		this.museumList[i].name.slice(0, 50) + "...";
		            		}
		          		}
		          		this.appMuseumId = this.museumList[0].id;
		          		// this.getTcOtaRule();
		          		this.getTcOtaOrderDTO();
		        	} else {
		          		this.$Message.error(res.data.msg);
		        	}
		      	});
		    },
	    	change(){
	    		this.getTcOtaOrderDTO()
	    	},
	    	getTcOtaRule(){
	    		this.loading1 = true
	    		this.$http("/stage/ota/getCodeOrderList", {
		        	appMuseumId: this.appMuseumId,
		        	otaType: this.otaType
		      	}, "post", res => {
		        	if (res.data.code == 200) {
		          		this.data2 = res.data.data
		          		for(let i=0;i<this.data2.length;i++){
		          			if(this.data2[i].dayOfWeek == 0){this.data2[i].dayOfWeek2 = '通用'}
		          			if(this.data2[i].dayOfWeek == 1){this.data2[i].dayOfWeek2 = '星期一'}
		          			if(this.data2[i].dayOfWeek == 2){this.data2[i].dayOfWeek2 = '星期二'}
		          			if(this.data2[i].dayOfWeek == 3){this.data2[i].dayOfWeek2 = '星期三'}
		          			if(this.data2[i].dayOfWeek == 4){this.data2[i].dayOfWeek2 = '星期四'}
		          			if(this.data2[i].dayOfWeek == 5){this.data2[i].dayOfWeek2 = '星期五'}
		          			if(this.data2[i].dayOfWeek == 6){this.data2[i].dayOfWeek2 = '星期六'}
		          			if(this.data2[i].dayOfWeek == 7){this.data2[i].dayOfWeek2 = '星期日'}
		          		}
		        	}else{
		          		this.$Message.error(res.data.msg);
		        	}
		        	this.loading1 = false
		      	})
	    	},
	    	saveTcOtaRule(){
	    		this.modal2 = true
	    		this.newData2 = {
	    			dayOfWeek: 0,
					limitNum: 0,
	    		}
	    		this.data3 = []
	    		this.id2 = ''
	    		this.ruleItems2 = []
	    	},
	    	submit2(){
	    		if(this.id2 == ''){
	    			this.loading2 = true
		    		this.$http("/stage/ota/saveTcOtaRule", {
			        	appMuseumId: this.appMuseumId,
			        	otaType: this.otaType,
			        	dayOfWeek: this.newData2.dayOfWeek,
			        	limitNum: this.newData2.limitNum,
			        	ruleItems: this.data3
			      	}, "post", res => {
			        	if (res.data.code == 200) {
			          		this.$Message.success('新增成功');
			          		this.modal2 = false
			          		this.getTcOtaRule()
			        	}else{
			          		this.$Message.error(res.data.msg);
			        	}
			        	this.loading2 = false
		      		})
	    		}else{
	    			this.loading2 = true
	    			this.$http("/stage/ota/updateTcOtaRule", {
			        	appMuseumId: this.appMuseumId,
			        	otaType: this.otaType,
			        	id: this.id2,
			        	dayOfWeek: this.newData2.dayOfWeek,
			        	limitNum: this.newData2.limitNum,
			        	ruleItems: this.data3
			      	}, "post", res => {
			        	if (res.data.code == 200) {
			          		this.$Message.success('新增成功');
			          		this.modal2 = false
			          		this.getTcOtaRule()
			        	}else{
			          		this.$Message.error(res.data.msg);
			        	}
			        	this.loading2 = false
			      	})
	    		}
	    	},
	    	detailRule(){
	    		this.modal3 = true
	    		this.newData3 = {
	    			limitNum: 0,
	    			timeRange: []
	    		}
	    		this.id3 = ''
	    	},
	    	submit3(){
	    		if(this.newData3.limitNum == ''){
	    			this.$Message.error('请输入限制人数(不能为0)');
	    			return false
	    		}
	    		if(this.newData3.timeRange[0] == ''){
	    			this.$Message.error('请选择时间区间');
	    			return false
	    		}
	    		if(this.id3 == ''){
	    			this.data3.push({
		    			limitNum: this.newData3.limitNum,
		    			timeRange: this.newData3.timeRange[0] + '-' + this.newData3.timeRange[1]
		    		})
	    		}else{
	    			for(let i=0;i<this.data3.length;i++){
	    				if(this.data3[i].id == this.id3){
	    					this.data3[i].limitNum = this.newData3.limitNum
	    					this.data3[i].timeRange = this.newData3.timeRange[0] + '-' + this.newData3.timeRange[1]
	    				}
	    			}
	    		}
	    		this.modal3 = false
	    	},
	    	del2(data){
	    		this.$Modal.confirm({
		        	title: "提示",
		        	content: "<p>确定要删除此规则吗？</p>",
		        	onOk: () => {
		          		this.loading1 = true;
		          		this.$http("/stage/ota/deleteTcOtaRule",{
		          			id: data.row.id,
						},"get",res => {
		              		if (res.data.code == 200) {
		                		this.$Message.success("删除成功");
		                		this.getTcOtaRule()
		              		} else {
		                		this.$Message.error(res.data.msg);
		              		}
		              		this.loading1 = false;
		            	}
		          	)},
		        	onCancel: () => {}
		      	});
	    	},
	    	bianji2(data){
	    		this.modal2 = true
	    		this.newData2 = {
	    			dayOfWeek: data.row.dayOfWeek,
					limitNum: data.row.limitNum,
					id: data.row.id
	    		}
	    		this.id2 = data.row.id
	    		this.data3 = []
	    		for(let i=0;i<data.row.items.length;i++){
	    			this.data3.push({
	    				limitNum: data.row.items[i].limitNum,
	    				timeRange: data.row.items[i].timeRange,
	    				id: data.row.items[i].id,
	    			})
	    		}
	    	},
	    	del3(data){
	    		this.loading5 = true
	    		this.$http("/stage/ota/deleteTcOtaRuleItem", {
	    			id: data.row.id
	    		}, "get", res => {
		        	if (res.data.code == 200) {
		          		this.data3.splice(data.index,1)
		        	} else {
		          		this.$Message.error(res.data.msg);
		        	}
	    			this.loading5 = false
		      	});
	    	},
	    	bianji3(data){
	    		this.modal3 = true
	    		this.id3 = data.row.id
	    		this.newData3 = {
	    			limitNum: data.row.limitNum,
	    			timeRange: [data.row.timeRange.split('-')[0],data.row.timeRange.split('-')[1]]
	    		}
	    	},
	    	// 
	    	getTcOtaOrderDTO(){
	    		this.loading3 = true
	    		this.$http("/stage/ota/getCodeOrderList", {
	    			appMuseumId: this.appMuseumId,
					current: this.current,
					bookName: this.bookName,
					end: this.getTime(this.time[1]),
					size: this.size,
					start: this.getTime(this.time[0])
	    		}, "post", res => {
		        	if (res.data.code == 200) {
		          		this.data1 = res.data.data.records
		          		this.total1 = res.data.data.total
		        	} else {
		          		this.$Message.error(res.data.msg);
		        	}
	    			this.loading3 = false
		      	});
	    	},
	    	changeOrder(){
	    		this.current = 1
	    		this.getTcOtaOrderDTO()
	    	},
	    	changePage(data){
	    		this.current = data
	    		this.getTcOtaOrderDTO()
	    	},
	    	detail(data){
	    		this.loading4 = true
	    		this.modal4 = true
	    		this.$http("/stage/ota/getTcOtaOrderPersonDTO", {
	    			tcOtaOrderId: data.row.id
	    		}, "get", res => {
		        	if (res.data.code == 200) {
		          		this.data4 = res.data.data
		        	} else {
		          		this.$Message.error(res.data.msg);
		        	}
	    			this.loading4 = false
		      	});
	    	},

	    }
	}
</script>

<style scoped>

</style>